<template>
	<view class="container">
		<view class="cate-four row">
			<view class="aside">
				<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
					<block v-for="(item, index) in cateList" :key="index">
						<view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')"
							@click="changeActive(index)">
							<text class="name">{{ item.name }}</text>
							<view v-if="index == selectIndex" class="active-line bg-primary"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="main bg-body">
				<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true"
					@scrolltolower="getGoodsSearchFun">
					<view class="main-wrap">
						<view style="border-radius: 10rpx;">
							<swipers :pid="4" height="200rpx" previous-margin="0" padding="20rpx 0 0" radius="10rpx">
							</swipers>
						</view>
						<view class="cate-two mt20" v-if="currentType">
							<view v-for="(sitem, sindex) in cateTwoList" :key="sindex" class="two-item bg-white mb20">
								<navigator class="title row-between" v-if="sitem.type == 1" hover-class="none"
									:url="`/pages/goods_search/goods_search?id=${sitem.id}&name=${sitem.name}&type=${sitem.type}`">
									<text class="name bold sm">{{sitem.name}}</text>
									<u-icon name="arrow-right"></u-icon>
								</navigator>
								<view class="title row-between" v-else>
									<text class="name bold sm">{{sitem.name}}</text>
								</view>
								<view class="three-list row wrap">
									<navigator v-for="(titem, tindex) in sitem.sons" :key="tindex"
										class="three-item column-center mb20" hover-class="none"
										:url="`/pages/goods_search/goods_search?id=${titem.id}&name=${titem.name}&type=${titem.type}`">
										<u-image mode="aspectFit" width="150rpx" height="150rpx" :src="titem.image">
										</u-image>
										<view class="text mt20 xs">{{ titem.name }}</view>
									</navigator>
								</view>
							</view>
						</view>
						<view class="goods" v-else>
							<view class="row condition bg-white mt20">
								<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合
								</view>
								<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
									<text :class="priceSort ? 'primary' : ''">价格</text>
									<view>
										<trigonometry direction="up" size="small"
											:color="priceSort == 'desc' ? '#FF5058' : '#333'">
										</trigonometry>
										<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'">
										</trigonometry>
									</view>
								</view>
								<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
									<text :class="saleSort ? 'primary' : ''">销量</text>
									<view>
										<trigonometry direction="up" size="small"
											:color="saleSort == 'desc' ? '#FF5058' : '#333'">
										</trigonometry>
										<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'">
										</trigonometry>
									</view>
								</view>
							</view>
							<view class="goods-list">
								<view class="row item bg-white mt20" v-for="(item, index) in goodsList" :key="index">
									<u-image width="200rpx" height="200rpx" border-radius="14rpx"
										:src="item.image"></u-image>
									<view class="flex1 ml20 mr10">
										<view class="line2">{{item.name}}</view>
										<view class="muted">
											<text class="xxs muted_text">进货价</text> <price-format :subscriptSize="24"
												:firstSize="24" :secondSize="24"
												:price="item.business_price"></price-format>
										</view>
										<view class="primary mt10">
											<price-format :price="item.price" :subscriptSize="22" :firstSize="34"
												:secondSize="26"></price-format>
										</view>
										<view class="search" @click="toGoodsDetail(item)">挑选规格</view>
									</view>
								</view>
							</view>
							<loading-footer :status="status" :slot-empty="true">
								<view slot="empty" class="column-center" style="padding: 200rpx 0 0">
									<image class="img-null" src="/static/images/goods_null.png"></image>
									<text class="lighter sm">暂无商品</text>
								</view>
							</loading-footer>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer row bg-white fixed">
			<navigator class="btn cart column-center" hover-class="none"
				:url="'/pages/shop_cart/shop_cart?shop_type='+ goodsDetail.shop_type">
				<image class="icon-md" src="/static/images/icon_cart.png"></image>
				<text class="xxs lighter">购物车</text>
				<u-badge v-if="cartNum" bgColor="#FF2C3C" :offset="[8, 10]" :count="cartNum"></u-badge>
			</navigator>
			<view class="all-price lg mr20 row-end">
				<view>共：</view>
				<view class="primary">{{cartNum || 0}}件</view>
			    
			</view>
			<navigator hover-class="none"
				:url="'/pages/shop_cart/shop_cart?shop_type='+ goodsDetail.shop_type">
				<view class="right-btn br60 white">前往结算</view>
			</navigator>
		</view>
		<spec-popup :shop_type="goodsDetail.shop_type" :show="showSpec" :goods="goodsDetail" :is-seckill="goodsType == 1" @close="showSpec = false"
			:show-add="popupType == 1 || popupType == 0" :show-buy="popupType == 2 || popupType == 0"
			:showConfirm="popupType == 3" @buynow="onBuy" @addcart="onAddCart" @change="onChangeGoods"
			:group="Boolean(isGroup)" :red-btn-text="btnText.red" :yellow-btn-text="btnText.yellow"
			@confirm="onConfirm"></spec-popup>
	</view>
</template>

<script>
	import {
		arraySlice,
		trottle,
		loadingFun
	} from '@/utils/tools'
	import {
		addCart,
		getCatrgory,
		getGoodsSearch,
		getGoodsDetail,
		getCartNum
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		props: {
			current: {
				type: [Number, String],
				default: 0
			},
			list: {
				type: Array,
				default: () => ([])
			},

		},
		data() {
			return {
				page: 1,
				status: loadingType.LOADING,
				selectIndex: this.current,
				cateList: [],
				cateTwoList: [],
				goodsList: [],
				priceSort: '',
				saleSort: '',
				// 商品详情
				id: 0,
				goodsDetail: {},
				swiperList: [],
				comment: {},
				goodsLike: [],
				countTime: 0,
				goodsType: 0,
				team: {},
				teamFound: [],
				isFirstLoading: true,
				showSpec: false,
				popupType: '',
				isGroup: 0,
			};
		},
		onLoad(options) {
			this.$nextTick(() => {
				this.getCatrgoryFun()
			});
			this.onNormal = trottle(this.onNormal, 500, this);
			this.onPriceSort = trottle(this.onPriceSort, 500, this);
			this.onSaleSort = trottle(this.onSaleSort, 500, this);
		},
		methods: {
			...mapActions(['getCartNum']),
			toGoodsDetail(item) {
				this.id = item.id;
				this.getGoodsDetailFun();
			},
			onChangeGoods(e) {
				console.log(e);
				this.checkedGoods = e.detail;
			},
			async getGoodsDetailFun() {
				const {
					data,
					code
				} = await getGoodsDetail({
					id: this.id
				});
				if (code == 1) {
					let {
						goods_image,
						content,
						comment,
						like,
						activity
					} = data;
					let {
						info,
						team,
						team_found
					} = activity; //秒杀时间
					let time = info ?
						info.end_time - Date.now() / 1000 //拼团时间
						:
						team ?
						team.end_time - Date.now() / 1000 :
						0;

					if (team_found) {
						team_found = arraySlice(team_found, [], 2);
					}

					this.goodsDetail = data;
					this.swiperList = goods_image;
					this.comment = comment;
					this.goodsLike = like;
					this.countTime = time;
					this.goodsType = activity.type || 0;
					this.team = team ? team : {};
					this.teamFound = team_found ? team_found : [];
					uni.setStorageSync('shop_type',this.goodsDetail.shop_type)
					this.getCartNum();
					this.$nextTick(() => {
						this.isFirstLoading = false;
					});
					this.showSpecFun(1)
				} else {
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			onBuy(e) {
				let {
					id,
					goodsNum
				} = e.detail;
				const {
					goodsType,
					team
				} = this;
				let goods = [{
					item_id: id,
					num: goodsNum
				}];
				const params = {
					goods
				};
				this.showSpec = false;
				goodsType == 2 ? (params.teamId = team.team_id) : '';
				this.foundId ? (params.foundId = this.foundId) : '';
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify(params)))
				})
			},
			onConfirm(e) {
				const {
					team: {
						team_id
					}
				} = this;
				teamCheck({
					team_id,
					found_id: this.foundId
				}).then(res => {
					if (res.code == 1) {
						this.onBuy(e);
					}
				});
			},
			async onAddCart(e) {
				let {
					id,
					goodsNum
				} = e.detail;

				if (this.goodsType == 2) {
					// 拼团单独购买
					let goods = [{
						item_id: id,
						num: goodsNum
					}];
					uni.navigateTo({
						url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
							goods
						})))
					})
					return
				}
				const {
					code,
					data,
					msg
				} = await addCart({
					item_id: id,
					goods_num: goodsNum
				});
				if (code == 1) {
					this.getCartNum();
					this.$toast({
						title: msg,
						icon: 'success'
					});
					this.showSpec = false;
				}
			},
			getCatrgoryFun(current) {
				getCatrgory().then(res => {
					if (res.code == 1) {
						this.cateList = res.data;
						this.getGoodsSearchFun(this.current)
					}
				});
			},
			showSpecFun(type, id) {
				if (!this.isLogin) return toLogin();
				if (this.goodsType == 2 && [2, 3].includes(type)) {
					this.isGroup = 1;
					this.foundId = id;
				} else {
					this.isGroup = 0;
					this.foundId = '';
				}
				this.popupType = type;
				this.showSpec = true;
			},
			changeActive(index) {
				const {
					cateList
				} = this
				this.selectIndex = index
				this.cateTwoList = cateList[this.selectIndex].sons || []
				this.onRefresh()
			},
			onRefresh() {
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => {
					this.getGoodsSearchFun();
				});
			},
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

			onPriceSort() {
				let {
					priceSort
				} = this;
				this.saleSort = ''
				this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

			onSaleSort() {
				let {
					saleSort
				} = this;
				this.priceSort = ''
				this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh();
			},
			async getGoodsSearchFun() {
				let {
					page,
					goodsList,
					priceSort,
					saleSort,
					status,
					cateList,
					selectIndex
				} = this;
				const item = cateList[selectIndex]
				if (item.type == 0) return
				if (status == loadingType.FINISHED) return;
				const params = {
					category_id: item.id,
					page_no: page,
					price: priceSort,
					sales_sum: saleSort
				}
				const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
		},
		watch: {
			current: {
				handler(nVal) {
					this.selectIndex = nVal;
				}
			},
			list: {
				handler(val) {
					if (!val.length) return
					let index = val.findIndex((item) => item.type == 1)
					this.cateList = val
					this.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
					this.getGoodsSearchFun()
				},
			}
		},
		computed: {
			...mapGetters(['cartNum']),
			btnText() {
				const {
					goodsType
				} = this;
				switch (goodsType) {
					case 1:
						return {
							red: '立即抢购',
								yellow: ''
						};
					case 2:
						return {
							red: '立即开团',
								yellow: '单独购买'
						};
					default:
						return {
							red: '立即购买',
								yellow: '加入购物车'
						};
				}
			},
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this
				if (priceSort == '' && saleSort == '') {
					return true;
				}

				return false;
			},
			currentType() {
				const {
					cateList,
					selectIndex
				} = this
				return cateList[selectIndex] ? cateList[selectIndex].type == 0 : true
			}
		},
	}
</script>

<style lang="scss">
	$header-height: 94rpx;

	.cate-four {
		height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
		background-color: #fff;

		.aside {
			width: 180rpx;
			flex: none;
			height: 100%;

			.one-item {
				position: relative;
				text-align: center;
				padding: 26rpx 10rpx;

				&.active {
					color: $-color-primary;
					font-size: 26rpx;
					font-weight: bold;
				}

				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;

			.main-wrap {
				position: relative;
				padding: 0 20rpx;

				.goods {
					.item {
						border-radius: 14rpx;
						overflow: hidden;

						.add {
							width: 46rpx;
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
						}
					}

					.muted_text {
						margin-right: 10rpx;
						line-height: 48rpx;
						font-size: 24rpx;
					}

					.search {
						font-size: 24rpx;
						float: right;
						background-color: #FFA200;
						border-radius: 10rpx;
						padding: 5rpx 10rpx;
					}
				}

				.two-item {
					border-radius: 10rpx;

					.title {
						height: 90rpx;
						padding: 0 20rpx;

						.line {
							width: 40rpx;
							height: 1px;
							background-color: #BBBBBB;
						}
					}

					.three-list {
						align-items: flex-start;
						padding: 0 10rpx;

						.three-item {
							width: 33%;

							.text {
								text-align: center;
							}
						}
					}

				}
			}
		}

		.condition {
			height: 80rpx;
			border-radius: 10rpx;

			.tag {
				flex: 1;
			}
		}
	}
	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
	
		.btn {
			width: 100rpx;
			height: 100rpx;
			position: relative;
			line-height: 1.3;
		}
	
		.cart-num {
			position: absolute;
			left: 60rpx;
			top: 6rpx;
		}
	
		.add-cart,
		.right-buy {
			flex: 1;
			text-align: center;
			padding: 16rpx 0;
		}
	
		.add-cart {
			background-color: #ffa630;
		}
	
		.right-buy {
			background-color: $-color-primary;
		}
		.all-price {
			font-size: 24rpx;
			text-align: right;
			flex: 1;
		}
		.right-btn {
			background: #FF2C3C;
			padding: 14rpx 45rpx;
			background: linear-gradient(90deg, rgba(249, 95, 47, 1) 0%, rgba(255, 44, 60, 1) 100%);
		}
	}
</style>